<template>
	<view class="signDoms flexDom flexColumn">
		<view class="flexOne">
			<!-- landscape -->
		    <l-signature 
				disableScroll  
				ref="signatureRef" 
				:penColor="penColor" 
				:penSize="penSize" 
				:openSmooth="openSmooth" 
			></l-signature>
		</view>
		<view class="signBtn flexDom">
		    <button @click="onClick('clear')">清空</button>
		    <button @click="onClick('undo')">撤消</button>
		    <button type="primary" @click="onClick('save')">保存</button>
		    <!-- uvue 不支持 openSmooth -->
		    <!-- <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            penColor: 'black',
	            penSize: 5,
	            url: '',
	            openSmooth: true
	        }
	    },
	    methods: {
			
			/** 操作按钮-事件 */
	        onClick(type) {
	             if(type == 'openSmooth') {
	                 this.openSmooth = !this.openSmooth
	                 return
	             }
	            if (type == 'save') {
	                this.$refs.signatureRef.canvasToTempFilePath({
	                    success: (res) => {
	                        // 是否为空画板 无签名
	                        // console.log("画板数据：", res);
	                        // 生成图片的临时路径
	                        // H5 生成的是base64
	                        this.url = res.tempFilePath;
							// 返回上一页
							// this.$PrePage()获取上一页实例，在App.vue定义
							this.$PrePage().selectPagesData({ sign: res.tempFilePath}, '4');
							// 返回上上一页
							uni.navigateBack();
	                    }
	                })
	                return
	            }
	            if (this.$refs.signatureRef) {
					this.$refs.signatureRef[type]()
				}
	        }
	    }
	
	}
</script>

<style lang="scss" scoped>
	.signDoms {
		height: 100vh;
		.flexOne {
			padding-bottom: 120upx;
			box-sizing: border-box;
		}
		.signBtn {
			position: fixed;
			bottom: 20upx;
			width: 100%;
			text-align: center;
			padding-top: 20upx;
			border-top: 2px dotted #dddd;
			z-index: 99;
		}
	}
</style>